{% extends 'base.html' %}

{% block title %}效益分析{% endblock %}

{% block content %}
<div class="row">
    <!-- 产值分析 -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">产值分析</h5>
            </div>
            <div class="card-body">
                <div id="outputChart" style="height: 400px;"></div>
            </div>
        </div>
    </div>

    <!-- 区域效益分析 -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">区域效益分析</h5>
            </div>
            <div class="card-body">
                <div id="regionBenefitChart" style="height: 400px;"></div>
            </div>
        </div>
    </div>

    <!-- 效益趋势分析 -->
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">效益趋势分析</h5>
            </div>
            <div class="card-body">
                <div id="trendChart" style="height: 400px;"></div>
            </div>
        </div>
    </div>
</div>

<!-- 加载提示 -->
<div id="loadingIndicator" class="position-fixed top-50 start-50 translate-middle d-none">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">加载中...</span>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const outputChart = echarts.init(document.getElementById('outputChart'));
    const regionBenefitChart = echarts.init(document.getElementById('regionBenefitChart'));
    const trendChart = echarts.init(document.getElementById('trendChart'));
    const loadingIndicator = document.getElementById('loadingIndicator');

    // 显示加载提示
    loadingIndicator.classList.remove('d-none');
    outputChart.showLoading();
    regionBenefitChart.showLoading();
    trendChart.showLoading();

    // 获取数据
    fetch("{{ url_for('analysis.get_benefit_data') }}")
        .then(response => response.json())
        .then(data => {
            // 隐藏加载提示
            loadingIndicator.classList.add('d-none');
            outputChart.hideLoading();
            regionBenefitChart.hideLoading();
            trendChart.hideLoading();

            // 产值分析图表
            outputChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}万元 ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    type: 'pie',
                    radius: '50%',
                    data: data.output_distribution,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            });

            // 区域效益分析图表
            regionBenefitChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    data: ['总产值', '平均亩产值']
                },
                xAxis: {
                    type: 'category',
                    data: data.region_benefit.map(item => item.name),
                    axisLabel: { rotate: 45 }
                },
                yAxis: [{
                    type: 'value',
                    name: '总产值(万元)'
                }, {
                    type: 'value',
                    name: '亩产值(元/亩)'
                }],
                series: [{
                    name: '总产值',
                    type: 'bar',
                    data: data.region_benefit.map(item => item.total_value)
                }, {
                    name: '平均亩产值',
                    type: 'line',
                    yAxisIndex: 1,
                    data: data.region_benefit.map(item => item.per_mu_value)
                }]
            });

            // 效益趋势分析图表
            trendChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: data.trend_data.crops
                },
                xAxis: {
                    type: 'category',
                    data: data.trend_data.dates,
                    axisLabel: { rotate: 45 }
                },
                yAxis: {
                    type: 'value',
                    name: '产值(万元)'
                },
                series: data.trend_data.crops.map(crop => ({
                    name: crop,
                    type: 'line',
                    data: data.trend_data.values[crop]
                }))
            });
        })
        .catch(error => {
            console.error('获取数据失败:', error);
            loadingIndicator.classList.add('d-none');
            outputChart.hideLoading();
            regionBenefitChart.hideLoading();
            trendChart.hideLoading();
            alert('获取数据失败，请刷新页面重试');
        });

    // 监听窗口大小变化
    window.addEventListener('resize', function() {
        outputChart.resize();
        regionBenefitChart.resize();
        trendChart.resize();
    });
});
</script>
{% endblock %} 